<template>
  <view class="bg-white h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <view class="px-6 pt-12 pb-4 flex items-center justify-between border-b border-gray-100">
      <view class="flex items-center">
        <view class="text-blue-500 mr-3" @click="goBack">
          <text class="fas fa-chevron-left"></text>
        </view>
        <text class="text-xl font-bold">我的收藏</text>
      </view>
      <button class="text-blue-500 font-medium" @click="toggleEditMode">
        {{ isEditing ? '完成' : '编辑' }}
      </button>
    </view>

    <!-- 主要内容区域 -->
    <view class="flex-1 px-6 py-4 overflow-auto">
      <!-- 收藏分类 -->
      <view class="flex border-b border-gray-200 mb-6">
        <button 
          v-for="category in categories" 
          :key="category.id"
          class="pb-2 px-4 font-medium"
          :class="selectedCategory === category.id ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500'"
          @click="selectCategory(category.id)"
        >
          {{ category.name }}
        </button>
      </view>

      <!-- 收藏列表 -->
      <view class="grid grid-cols-2 gap-4">
        <view 
          v-for="item in filteredFavorites" 
          :key="item.id"
          class="group relative"
        >
          <view class="aspect-square bg-gray-100 rounded-xl overflow-hidden" @click="viewPattern(item)">
            <image :src="item.cover" :alt="item.name" class="w-full h-full object-cover"></image>
          </view>
          
          <!-- 悬停按钮 -->
          <view class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-40 transition-all flex items-center justify-center opacity-0 hover:opacity-100" v-if="!isEditing">
            <button class="bg-white text-blue-500 px-4 py-2 rounded-lg font-medium shadow-lg hover:bg-blue-50 transition-colors" @click="addToPlaylist(item)">
              添加到播放列表
            </button>
          </view>
          
          <!-- 编辑模式选择框 -->
          <view v-if="isEditing" class="absolute top-2 left-2 w-6 h-6 bg-white rounded-full border-2 flex items-center justify-center" 
                :class="selectedItems.includes(item.id) ? 'border-blue-500 bg-blue-500' : 'border-gray-300'"
                @click="toggleSelection(item.id)">
            <text v-if="selectedItems.includes(item.id)" class="fas fa-check text-white text-xs"></text>
          </view>
          
          <view class="mt-2">
            <text class="font-medium block">{{ item.name }}</text>
            <text class="text-sm text-gray-500">收藏于 {{ item.favoriteDate }}</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="filteredFavorites.length === 0" class="flex flex-col items-center justify-center py-20">
        <text class="fas fa-heart text-6xl text-gray-300 mb-4"></text>
        <text class="text-gray-500 text-lg mb-2">暂无收藏</text>
        <text class="text-gray-400 text-sm">去图案广场寻找喜欢的图案吧</text>
        <button class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-full" @click="goToExplore">
          去逛逛
        </button>
      </view>
    </view>

    <!-- 编辑模式底部操作栏 -->
    <view v-if="isEditing && selectedItems.length > 0" class="px-6 py-4 border-t border-gray-200 bg-white">
      <view class="flex space-x-4">
        <button class="flex-1 py-3 bg-blue-500 text-white rounded-lg font-medium" @click="addSelectedToPlaylist">
          添加到播放列表
        </button>
        <button class="flex-1 py-3 bg-red-500 text-white rounded-lg font-medium" @click="deleteSelected">
          取消收藏
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Favorites',
  data() {
    return {
      isEditing: false,
      selectedCategory: 'all',
      selectedItems: [],
      
      categories: [
        { id: 'all', name: '全部' },
        { id: 'landscape', name: '风景' },
        { id: 'animal', name: '动物' },
        { id: 'people', name: '人物' }
      ],
      
      favorites: [
        {
          id: '1',
          name: '星空图案',
          cover: '/static/pattern_images/StarryNight.svg',
          category: 'landscape',
          favoriteDate: '2023-12-25'
        },
        {
          id: '2',
          name: '森林小径',
          cover: '/static/pattern_images/maze.svg',
          category: 'landscape',
          favoriteDate: '2023-12-20'
        },
        {
          id: '3',
          name: '螺旋星系',
          cover: '/static/pattern_images/Spiral6.svg',
          category: 'abstract',
          favoriteDate: '2023-12-18'
        },
        {
          id: '4',
          name: '蝴蝶飞舞',
          cover: '/static/pattern_images/Butterfly.svg',
          category: 'animal',
          favoriteDate: '2023-12-15'
        },
        {
          id: '5',
          name: '玫瑰花园',
          cover: '/static/pattern_images/rose.svg',
          category: 'landscape',
          favoriteDate: '2023-12-10'
        },
        {
          id: '6',
          name: '阴阳太极',
          cover: '/static/pattern_images/yin-yang.svg',
          category: 'abstract',
          favoriteDate: '2023-12-05'
        }
      ]
    }
  },
  
  computed: {
    filteredFavorites() {
      if (this.selectedCategory === 'all') {
        return this.favorites
      }
      return this.favorites.filter(item => item.category === this.selectedCategory)
    }
  },
  
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    toggleEditMode() {
      this.isEditing = !this.isEditing
      if (!this.isEditing) {
        this.selectedItems = []
      }
    },
    
    selectCategory(categoryId) {
      this.selectedCategory = categoryId
      this.selectedItems = []
    },
    
    toggleSelection(itemId) {
      const index = this.selectedItems.indexOf(itemId)
      if (index > -1) {
        this.selectedItems.splice(index, 1)
      } else {
        this.selectedItems.push(itemId)
      }
    },
    
    viewPattern(item) {
      if (this.isEditing) {
        this.toggleSelection(item.id)
      } else {
        uni.navigateTo({
          url: `/pages/pattern/detail?id=${item.id}`
        })
      }
    },
    
    addToPlaylist(item) {
      uni.showToast({
        title: '已添加到播放列表',
        icon: 'success'
      })
    },
    
    addSelectedToPlaylist() {
      uni.showToast({
        title: `已添加${this.selectedItems.length}个图案到播放列表`,
        icon: 'success'
      })
      this.selectedItems = []
      this.isEditing = false
    },
    
    deleteSelected() {
      uni.showModal({
        title: '确认取消收藏',
        content: `确定要取消收藏${this.selectedItems.length}个图案吗？`,
        success: (res) => {
          if (res.confirm) {
            this.favorites = this.favorites.filter(item => !this.selectedItems.includes(item.id))
            this.selectedItems = []
            this.isEditing = false
            uni.showToast({
              title: '已取消收藏',
              icon: 'success'
            })
          }
        }
      })
    },
    
    goToExplore() {
      uni.switchTab({
        url: '/pages/explore/index'
      })
    }
  }
}
</script>

<style scoped>
/* TailwindCSS 工具类样式 */
.bg-white { background-color: #ffffff; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-red-500 { background-color: #ef4444; }
.bg-black { background-color: #000000; }

.text-blue-500 { color: #3b82f6; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-white { color: #ffffff; }

.h-screen { height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }

.px-6 { padding-left: 48rpx; padding-right: 48rpx; }
.py-4 { padding-top: 32rpx; padding-bottom: 32rpx; }
.py-2 { padding-top: 16rpx; padding-bottom: 16rpx; }
.py-3 { padding-top: 24rpx; padding-bottom: 24rpx; }
.py-20 { padding-top: 160rpx; padding-bottom: 160rpx; }
.px-4 { padding-left: 32rpx; padding-right: 32rpx; }
.px-6 { padding-left: 48rpx; padding-right: 48rpx; }
.pt-12 { padding-top: 96rpx; }
.pb-2 { padding-bottom: 16rpx; }
.pb-4 { padding-bottom: 32rpx; }

.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.text-xl { font-size: 40rpx; }
.text-lg { font-size: 36rpx; }
.text-sm { font-size: 28rpx; }
.text-xs { font-size: 24rpx; }
.text-6xl { font-size: 96rpx; }

.font-bold { font-weight: bold; }
.font-medium { font-weight: 500; }

.border-b { border-bottom-width: 1rpx; }
.border-t { border-top-width: 1rpx; }
.border-2 { border-width: 2rpx; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-blue-500 { border-color: #3b82f6; }
.border-b-2 { border-bottom-width: 2rpx; }

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }

.mb-2 { margin-bottom: 16rpx; }
.mb-4 { margin-bottom: 32rpx; }
.mb-6 { margin-bottom: 48rpx; }
.mr-3 { margin-right: 24rpx; }
.mt-2 { margin-top: 16rpx; }
.mt-4 { margin-top: 32rpx; }

.rounded-xl { border-radius: 24rpx; }
.rounded-lg { border-radius: 16rpx; }
.rounded-full { border-radius: 9999px; }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

.gap-4 { gap: 32rpx; }

.aspect-square { aspect-ratio: 1 / 1; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.w-6 { width: 48rpx; }
.h-6 { height: 48rpx; }

.object-cover { object-fit: cover; }

.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-2 { top: 16rpx; }
.left-2 { left: 16rpx; }

.block { display: block; }

.space-x-4 > view:not(:first-child) { margin-left: 32rpx; }

.bg-opacity-0 { background-color: rgba(0, 0, 0, 0); }
.bg-opacity-40 { background-color: rgba(0, 0, 0, 0.4); }

.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }

.hover\:bg-opacity-40:hover { background-color: rgba(0, 0, 0, 0.4); }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:bg-blue-50:hover { background-color: #eff6ff; }

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.group:hover .hover\:bg-opacity-40 { background-color: rgba(0, 0, 0, 0.4); }
.group:hover .hover\:opacity-100 { opacity: 1; }

/* Font Awesome 图标 */
.fas {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
}

.fa-chevron-left:before { content: "\f053"; }
.fa-check:before { content: "\f00c"; }
.fa-heart:before { content: "\f004"; }
</style>
